home *** CD-ROM | disk | FTP | other *** search
/ MacHome 2001 June / MacHome Magazine Demo Disc June 2001.iso / Stuff / Software / Graphic / PageSpinner 3.0.2 / Examples / JavaScript / Timer Example < prev    next >
Encoding:
Text File  |  2000-10-16  |  4.3 KB  |  168 lines  |  [TEXT/JyWs]
  1. <html><head>
  2. <title>JavaScript Timer</title>
  3.  
  4. <script language="JavaScript" type="text/javascript">
  5. <!--
  6. /* 
  7.     JavaScript Timer
  8.     Written by Jerry Aman, Optima System
  9.     Part of the PageSpinner distribution.
  10.  
  11.     We will not be held responsible for any unwanted 
  12.     effects due to the usage of this script or any derivative.  
  13.     No warrantees for usability for any specific application are 
  14.     given or implied.
  15.  
  16.     You are free to use and modify this script,
  17.     if the credits above are given in the source code
  18. */
  19.  
  20. var    timerID = null;
  21. var    timerRunning = false;
  22. var    startDate;
  23. var    startSecs;
  24.  
  25. function stopclock()
  26. {
  27.     if(timerRunning)
  28.         clearTimeout(timerID);
  29.     timerRunning = false;
  30. }
  31.  
  32. function startclock()
  33. {
  34.     startDate = new Date();
  35.     startSecs = (startDate.getHours()*60*60) + (startDate.getMinutes()*60) 
  36.                         + startDate.getSeconds()
  37.  
  38.     stopclock();
  39.     showtime();
  40. }
  41.  
  42.  
  43. /*    -------------------------------------------------
  44.     showtime()
  45.     Puts the amount of time that has passed since 
  46.     loading the page into the field named timerField in 
  47.     the form named timeForm 
  48.     -------------------------------------------------    */
  49.  
  50. function showtime()
  51. {
  52.     // this doesn't work correctly at midnight...
  53.  
  54.     var now = new Date()
  55.     var nowSecs = (now.getHours()*60*60) + (now.getMinutes()*60) + now.getSeconds()
  56.     var elapsedSecs = nowSecs - startSecs;
  57.  
  58.     var hours = Math.floor( elapsedSecs / 3600 );
  59.     elapsedSecs = elapsedSecs - (hours*3600);
  60.  
  61.     var minutes =     Math.floor( elapsedSecs / 60 );
  62.     elapsedSecs = elapsedSecs - (minutes*60);
  63.  
  64.     var seconds = elapsedSecs;
  65.  
  66.     var timeValue = "" + hours
  67.     timeValue  += ((minutes < 10) ? ":0" : ":") + minutes;
  68.     timeValue  += ((seconds < 10) ? ":0" : ":") + seconds;
  69.  
  70.         // Update display
  71.     document.timerForm.timerField.value = timeValue;
  72.     timerID = setTimeout("showtime()",1000);
  73.     timerRunning = true;
  74. }
  75.  
  76. /*    -------------------------------------------------
  77.     GetReward
  78.     Here you decide what to do depending upon
  79.     how long the user has waited 
  80.     In this case we display an alert and set the
  81.     HREF property of theLink to another page
  82.  
  83.     Immortal statements by Groucho Marx, 1890-1977
  84.     -------------------------------------------------    */
  85. function GetReward(theLink)
  86. {
  87.     var msgString;
  88.  
  89.     var now = new Date();
  90.     var nowSecs = (now.getHours()*60*60) + (now.getMinutes()*60) + now.getSeconds();
  91.     var elapsedSecs = nowSecs - startSecs;
  92.  
  93.     theLink.href = "groucho.html" // page to go
  94.  
  95.     if ( elapsedSecs > 70)     // After 70 secs
  96.         msgString =  "Time flies like an arrow.  Fruit flies like a banana."
  97.     else
  98.  
  99.     if ( elapsedSecs > 50) // After 50 secs
  100.         msgString = "I've had a perfectly wonderful evening.  But this wasn't it."
  101.     else
  102.  
  103.     if ( elapsedSecs > 30) // After 30 secs
  104.         msgString =  "Those are my principles. If you don't like them I have others."
  105.     else 
  106.     {
  107.         msgString = ("Sorry, no reward yet...")
  108.         theLink.href = "#" // Don't go to another page yet...
  109.     }
  110.  
  111.     window.alert(msgString);    // But let's display an alert first!
  112. }
  113.  
  114.  
  115. // -->
  116. </script>
  117.  
  118. </head>
  119. <body bgcolor="#FFFFFF" onLoad="startclock()">
  120. <h1>JavaScript Timer</h1>
  121.  
  122. <p><b>This page contains a JavaScript Timer Example</b></p>
  123.  
  124. <form name="timerForm" onSubmit="0">
  125. <p>You have been at this page for <input type="text" name="timerField" size=10 value =""></p>
  126. </form>
  127.  
  128. <p>
  129. Maybe it is time to collect your 
  130. <a href="#"
  131. onClick="GetReward(this);"
  132. onMouseOver="window.status='Oh, I cannot wait any longer!'; return true">
  133. <b>reward!</b></a></p>
  134.  
  135. <hr>
  136. <p>
  137. <b>How to use:</b>
  138. <p>
  139. Copy all JavaScript code (located in the Head section of this file) to another file. You can also use this file as a stationery. 
  140. <p>
  141. Use the following Body tag <code><BODY onLoad="startclock()"></code> to start the timer. 
  142. <p>
  143. Use something like this inside the Body part of your page to display the timer.</p>
  144.  
  145. <pre><FORM NAME="timerForm" onSubmit="0">
  146. You have been at this page for 
  147. <INPUT TYPE="text" NAME="timerField" SIZE=10 VALUE ="">
  148. </FORM>
  149. </pre>
  150.  
  151. <hr>
  152. <p>
  153. An example on how to use the value of the timer is the link that will execute the function <code>GetReward(theLink)</code>:</p>
  154.  
  155. <pre>Maybe it is time to collect your 
  156. <A HREF="#"
  157. onClick="GetReward(this);"
  158. onMouseOver="window.status='Oh, I cannot wait any longer!'; return true">
  159. <B>reward!</B></A>
  160.  
  161. </pre>
  162.  
  163. <p>
  164. You can change the action of what will happen when the viewer clicks on the link by editing the function <code>GetReward(theLink)</code>.</p>
  165.  
  166. </body>
  167. </html>
  168.